<template>
  <div class="DiyGroupActivity">
    <div class="content">
      <div class="top">
        <div class="comm" v-for="(item, index) in topCont" :key="index">
          <div class="title">
            {{item.title}}
          </div>
          <div class="text">
            {{item.text}}
          </div>
          <div class="icon_label" :style="{'color':item.color}">
            <svg-icon :icon-class="item.icon"></svg-icon>
          </div>
        </div>
      </div>
      <div class="bottom">
        <div class="btmComm" v-for="(item, index) in btmCont" :key="index">
          <div class="title">
            {{item.title}}
          </div>
          <div class="text">
            {{item.text}}
          </div>
          <div class="btmImg">
            <img :src="item.imgUrl" alt="">
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      topCont: [
        {
          title: "优惠团购",
          text: "自定义文字内容",
          icon: "BgLavel",
          color: "#FFB101"
        },
        {
          title: "附近好券",
          text: "自定义文字内容",
          icon: "BgLavel",
          color: "#00AAFF"
        }
      ],
      btmCont: [
        {
          title: "天天潮玩",
          text: "放松心情",
          imgUrl: require("../../../../assets/config_images/groupCate.png")
        },
        {
          title: "乐享折扣",
          text: "吃喝玩乐1折起",
          imgUrl: require("../../../../assets/config_images/groupCate.png")
        },
        {
          title: "周末好价",
          text: "自定义文字图片",
          imgUrl: require("../../../../assets/config_images/groupCate.png")
        },
        {
          title: "名店抢购",
          text: "大牌抢不停",
          imgUrl: require("../../../../assets/config_images/groupCate.png")
        }
      ]
    }
  }
}
</script>

<style lang="scss" scoped>
.DiyGroupActivity {
  padding: 0 10px;
  .content {
    width: 100%;
    height: 190px;
    .title {
      font-size: 14px;
    }
    .top {
      height: 75px;
      display: flex;
      flex-direction: row;
      justify-content: space-around;
      .comm {
        width: 49%;
        height: 100%;
        border-radius: 5px;
        background: #fff;
        padding: 12px 6px;
        position: relative;
        .text {
          margin-top: 3px;
          font-size: 10px;
          color: #FF4B33;
        }
        .icon_label {
          width: 50px;
          height: 100%;
          line-height: 75px;
          position: absolute;
          right: 0;
          top: 0;
          right: 15px;
          font-size: 50px;
          color: #FFB101;
          z-index: 9;
          opacity: 0.2;
        }
      }
    }
    .bottom {
      margin-top: 5px;
      height: 105px;
      display: flex;
      flex-direction: row;
      justify-content: space-around;
      .btmComm {
        height: 100%;
        width: 83px;
        border-radius: 5px;
        background: #fff;
        padding: 9px 6px;
        overflow: hidden;
        position: relative;
        .text {
          margin-top: 3px;
          font-size: 10px;
          color: #FF4B33;
        }
        .btmImg {
          width: 60px;
          height: 60px;
          position: absolute;
          bottom: 0;
          right: 0;
          img {
            width: 100%;
            height: 100%;
          }
        }
      }
    }
  }
}
</style>
